<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    div {
      overflow: hidden;
      width: 882px;
      height: 86px;
      margin: 100px auto;
      background-color: #ddd;
    }
    div>ul {
      width: 200%;
      list-style: none;
      animation: move 7s linear infinite;
    }
    div>ul>li {
      width: 126px;
      float: left;
    }
    div>ul>li>img {
      width: 100%;
    }
    @keyframes move {
      from {
          transform: translate(0);
      }
      to {
          transform: translate(-882px);
      }
    }
  </style>
</head>
<body>
  <div>
    <ul>
      <li><img src="img/1.jpg" alt=""></li>
      <li><img src="img/2.jpg" alt=""></li>
      <li><img src="img/3.jpg" alt=""></li>
      <li><img src="img/4.jpg" alt=""></li>
      <li><img src="img/5.jpg" alt=""></li>
      <li><img src="img/6.jpg" alt=""></li>
      <li><img src="img/7.jpg" alt=""></li>
      <li><img src="img/1.jpg" alt=""></li>
      <li><img src="img/2.jpg" alt=""></li>
      <li><img src="img/3.jpg" alt=""></li>
      <li><img src="img/4.jpg" alt=""></li>
      <li><img src="img/5.jpg" alt=""></li>
      <li><img src="img/6.jpg" alt=""></li>
      <li><img src="img/7.jpg" alt=""></li>
    </ul>
  </div>
</body>
</html>